<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }

        .avatar-upload {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .avatar-preview {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid #e6e6e6;
            overflow: hidden;
            margin-right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f9f9f9;
        }

        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-preview .default-avatar {
            font-size: 40px;
            color: #ccc;
        }

        .avatar-upload-btn {
            flex: 1;
        }

        .layui-form-item {
            margin-bottom: 25px;
        }

        .layui-form-label.required:after {
            content: "*";
            color: red;
            position: absolute;
            right: 5px;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label style="color:red">新增账号密码默认123456，请修改密码</label>
    </div>

    <!-- 头像上传区域 -->
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <div class="avatar-upload">
                <div class="avatar-preview">
                    <i class="layui-icon layui-icon-username default-avatar"></i>
                    <img id="avatarPreview" src="" style="display: none;">
                </div>
                <div class="avatar-upload-btn">
                    <button type="button" class="layui-btn" id="avatarUpload">
                        <i class="layui-icon">&#xe67c;</i>上传头像
                    </button>
                    <div style="margin-top: 10px; color: #999; font-size: 12px;">
                        支持JPG/PNG格式，大小不超过2MB
                    </div>
                </div>
            </div>
            <input type="hidden" name="avatar" id="avatar" value="">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <input type="text" name="id" id="id" style="display: none"
                   class="layui-input">
            <label class="layui-form-label required">账号</label>
            <div class="layui-input-inline">
                <input type="text" name="userName" id="userName"
                       value="" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label required">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="name"
                       lay-reqtext="姓名"
                       placeholder="请输入姓名" value="" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label required">角色类型:</label>
            <div class="layui-input-inline">
                <select name="roleType" id="roleType" lay-search="">
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">数据权限类型:</label>
            <div class="layui-input-inline">
                <select name="powerDataType" id="powerDataType" lay-search="">
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">权限到期时间</label>
            <div class="layui-input-inline">
                <input readonly="readonly" type="text" class="layui-input" name="powerLastTime"
                       id="powerLastTime">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">登录限制时间段</label>
            <div class="layui-input-inline">
                <input type="text" name="allowLoginPeriod" id="allowLoginPeriod"
                       placeholder="列如：8-20" value="" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="/static/js/common.js"></script>
<script>
    let roleType = $.common.getUrlParam("roleType");
    let powerDataType = $.common.getUrlParam("powerDataType");
    layui.use(['form', 'laydate', 'upload'], function () {
        var form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload;

        //初始化下拉框
        initRoleType();
        initPowerDataType();
        //初始化下拉框
        form.render("select");
        //初始化时间
        laydate.render({
            elem: '#powerLastTime'
            , type: 'datetime'
        });

        //头像上传
        upload.render({
            elem: '#avatarUpload',
            url: '/uploadFile/avatar', // 头像上传接口地址
            accept: 'images',
            acceptMime: 'image/*',
            exts: 'jpg|jpeg|png|gif',
            size: 2048, // 限制文件大小，单位 KB
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#avatarPreview').attr('src', result).show();
                    $('.default-avatar').hide();
                });
            },
            done: function(res) {
                //如果上传成功
                if(res.code == 0) {
                    $('#avatar').val(res.data); // 将返回的图片路径保存到隐藏域
                    $.common.showSuccessMessage('头像上传成功');
                } else {
                    $.common.showErrorMessage(res.message || '上传失败');
                    resetAvatarPreview();
                }
            },
            error: function() {
                $.common.showErrorMessage('上传接口异常');
                resetAvatarPreview();
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let url = "/users/saveOrUpdate"
            let callback = {
                onSuccess: function (result) {
                    if (result.code == '0') {
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.location.reload();
                        parent.layer.close(iframeIndex);
                    } else {
                        $.common.showErrorMessage(result.message)
                        return false;
                    }
                }
            };
            $.xAjax(url, 'POST', JSON.stringify(data.field), callback);
            return false;
        });

    });

    /**
     * 角色
     */
    function initRoleType() {
        let roleTypeArray = [{"key": "超级管理员", "value": 0}, {"key": "管理员", "value": 1}, {"key": "普通账号", "value": 2}];
        $('#roleType').append(new Option('请选择', '', true));// 下拉菜单里添加元素
        $.each(roleTypeArray, function (index, item) {
            let option = new Option(item.key, item.value);
            if (roleType) {
                if (item.value == roleType) {
                    option.selected = true;
                }
            }
            $('#roleType').append(option);// 下拉菜单里添加元素
        });
    }

    function initPowerDataType() {
        let powerDataTypeArray = [
            {"key": "修改", "value": 0},
            {"key": "查看", "value": 1},
            {"key": "无权限", "value": 2}];
        $('#powerDataType').append(new Option('请选择', '', true));// 下拉菜单里添加元素
        $.each(powerDataTypeArray, function (index, item) {
            let option = new Option(item.key, item.value);
            if (powerDataType) {
                if (item.value == powerDataType) {
                    option.selected = true;
                }
            }
            $('#powerDataType').append(option);// 下拉菜单里添加元素
        });
    }

    // 重置头像预览
    function resetAvatarPreview() {
        $('#avatarPreview').attr('src', '').hide();
        $('.default-avatar').show();
        $('#avatar').val('');
    }
</script>
</body>
</html>
